<template>
  <div id="homeline" style="width:500px;height:250px"></div>
</template>

<script>
export default {
  name:'HomeLine',
  component:{},
  methods:{},
  mounted(){
    const myCharts = echarts.init(document.getElementById('homeline'))
    const xData = ['VIP1','VIP2','VIP3','VIP4','VIP5','VIP6','VIP7','VIP8','超级VIP','至尊VIP']
    const yData = [3000,2800,3600,2002,2402,1990,919,920,600,790]
    const yyData = [2990,3800,1600,2402,2702,2990,619,1920,900,890]
    const option = {
      title:{
        text:'每月VIP增长数'
      },
      tooltip:{
        // show: true,
        trigger:'axis'
      },
      toolbox:{
        feature:{
          saveAsImage:{},
          restore:{},
          dataView:{},
          dataZoom:{},
          magicType: {
            type:['line','bar']
          }
        }
      },
      xAxis:{
        type: 'category',
        data:xData
      },
      yAxis:{
        type:'value',
        boundaryGap:true
      },
      series:[
        {
          type:'line',
          name:'2020年VIP总人数',
          data:yData,
          markPoint:{
            data:[
              {type:'max'},
              {type:'min'}
            ],
            symbolSize:40
          },
          smooth:true,
          stack:'all',
        },
        {
          type:'line',
          name:'2021年VIP总人数',
          data:yyData,
          markPoint:{
            data:[
              {type:'max'},
              {type:'min'}
            ],
            symbolSize:40
          },
          smooth:true,
          stack:'all',
        }
      ]
    }
    myCharts.setOption(option)
  }
}
</script>

<style scoped>

</style>